<template>
  <div class="data-panel">
    <ul class="flex">
      <li class="width-320 height-160 flex-col pointer" @click='changePanel(1)' :class="analysisType === 1 ? 'bg-active-purple' : 'bg-disactive-purple'">
        <span class="font-16">合计用户数(人)</span>
        <span class="font-white font-24 mar-t-15 mar-b-15" v-formatNum.number='panelData.totalMember'></span>
        <div class="flex">
          <div class="flex-col">
            <span class="font-14">支付人数</span>
            <span class="font-14">其他</span>
          </div>
          <div class="flex-col mar-l-11">
            <span class="font-w font-white font-16" v-formatNum.number='panelData.payMemberNum'></span>
            <span class="font-w font-16 font-white" v-formatNum.number='panelData.otherNum'></span>
          </div>
        </div>
      </li>
      <li class="width-320 height-160 flex-col pointer" @click='changePanel(2)' :class="analysisType === 2 ? 'bg-active-purple' : 'bg-disactive-purple'">
        <span class="font-16">主播(人)</span>
        <span class="font-white font-24 mar-t-15 mar-b-15" v-formatNum.number='panelData.anchorTotalNum'></span>
        <div class="flex">
          <div class="flex-col">
            <span class="font-14">业绩&lt;10w</span>
            <span class="font-14">业绩&gt;20w</span>
          </div>
          <div class="flex-col mar-l-11">
            <span class="font-w font-white font-16" v-formatNum.number='panelData.anchorLowOrderNum'></span>
            <span class="font-w font-16 font-white" v-formatNum.number='panelData.anchorHighOrderNum' ></span>
          </div>
        </div>
      </li>
      <li class="width-320 height-160 flex-col pointer" @click='changePanel(3)' :class="analysisType === 3 ? 'bg-active-purple' : 'bg-disactive-purple'">
        <span class="font-16">店主(人)</span>
        <span class="font-white font-24 mar-t-15 mar-b-15" v-formatNum.number='panelData.shopTotalNum'></span>
        <div class="flex">
          <div class="flex-col">
            <span class="font-14">业绩&lt;10w</span>
            <span class="font-14">业绩&gt;20w</span>
          </div>
          <div class="flex-col mar-l-11">
            <span class="font-w font-white font-16" v-formatNum.number='panelData.shopLowOrderNum'></span>
            <span class="font-w font-16 font-white" v-formatNum.number='panelData.shopHighOrderNum'></span>
          </div>
        </div>
      </li>
      <li class="width-320 height-160 flex-col pointer" @click='changePanel(4)' :class="analysisType === 4 ? 'bg-active-purple' : 'bg-disactive-purple'">
        <span class="font-16">批发商(人)</span>
        <span class="font-white font-24 mar-t-15 mar-b-15" v-formatNum.number='panelData.wholesaleTotalNum'></span>
        <div class="flex">
          <div class="flex-col">
            <span class="font-14">业绩&lt;10w</span>
            <span class="font-14">业绩&gt;20w</span>
          </div>
          <div class="flex-col mar-l-11">
            <span class="font-w font-white font-16" v-formatNum.number='panelData.wholesaleLowOrderNum'></span>
            <span class="font-w font-16 font-white" v-formatNum.number='panelData.wholesaleHighOrderNum'></span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import formatNum from '@/directive/formatNum/formatNum'
export default {
  data() {
    return {
      panelData: {
        payMemberNum: 0,
        totalMember: 0,
        otherNum: 0,
        anchorTotalNum: 0,
        anchorLowOrderNum: 0,
        anchorHighOrderNum: 0,
        shopTotalNum: 0,
        shopLowOrderNum: 0,
        shopHighOrderNum: 0,
        wholesaleTotalNum: 0,
        wholesaleLowOrderNum: 0,
        wholesaleHighOrderNum: 0
      },
      test: 900000,
      analysisType: 1	// 统计类型 1： 合计用户数 2：主播 3：店长 4：批发商
    }
  },
  mounted() {
    this.$bus.$on('getPanelData', (res) => {
      this.panelData = res
      this.panelData.otherNum = res.totalMember - res.payMemberNum
    })
  },
  methods: {
    changePanel(index) {
      if (this.analysisType === index) return
      this.analysisType = index
      this.$bus.$emit('getAnalysisType', this.analysisType)
    }
  },
  directives: {
    formatNum
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .data-panel {
    .pointer:hover{
      cursor:pointer
    }
    ul {
      padding: 0;
      margin: 0;
      &>li:not(:first-child) {
        margin-left: 16px;
      }
    }
    .bg-active-purple {
      background: #48484B;
      color:rgba(255,255,255,0.5);
      padding: 21px 22px;
      border: 1px solid #0A89FF;
    }
    .bg-disactive-purple {
      background: #313134;
      padding: 21px 22px;
      color:rgba(255,255,255,0.5);
      border: 1px solid #414144;
    }
  }
</style>